<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="../plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
        <link href="../plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
        <link href="../plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
        <link href="../plugins/clockpicker/css/bootstrap-clockpicker.min.css" rel="stylesheet">
        <link href="../plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="form-pickers.html#">Dropdown One</a>
                        <a class="dropdown-item" href="form-pickers.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="form-pickers.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="form-pickers.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">表格挑选者</h4>
                 <p class="text-muted page-title-alt">欢迎来到Ubold管理面板。 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="header-title m-t-0">Timepicker</h4>
                    <p class="text-muted font-14 m-b-25">
                        使用鼠标或键盘的箭头键轻松选择文本输入的时间。
                    </p>

                    <div class="form-group">
                        <label>默认时间选择器</label>
                        <div class="input-group">
                            <input id="timepicker" type="text" class="form-control">
                            <span class="input-group-addon"><i class="md md-access-time"></i></span>
                        </div><!-- input-group -->
                    </div>

                    <div class="form-group">
                        <label>24小时模式时间选择器</label>
                        <div class="input-group">
                            <input id="timepicker2" type="text" class="form-control">
                            <span class="input-group-addon"><i class="md md-access-time"></i></span>
                        </div><!-- input-group -->
                    </div>

                    <div class="form-group">
                        <label>为分钟字段指定一个步骤</label>
                        <div class="input-group">
                            <input id="timepicker3" type="text" class="form-control">
                            <span class="input-group-addon"><i class="md md-access-time"></i></span>
                        </div><!-- input-group -->
                    </div>

                </div> <!-- end card-box -->
            </div> <!-- end col -->

            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="header-title m-t-0">选色器
将颜色选择器添</h4>
                    <p class="text-muted font-14 m-b-25">
                        将颜色选择器添加到字段或任何其他元素。
                    </p>

                    <form action="#">
                        <div class="form-group">
                            <label>Default</label>
                            <input type="text" class="colorpicker-default form-control" value="#8fff00">
                        </div>
                        <div class="form-group">
                            <label>RGBA</label>
                            <input type="text" class="colorpicker-rgba form-control" value="rgb(0,194,255,0.78)" data-color-format="rgba">
                        </div>
                        <div class="form-group">
                            <label>As Component</label>
                            <div data-color-format="rgb" data-color="rgb(255, 146, 180)" class="colorpicker-default input-group">
                                <input type="text" readonly="readonly" value="" class="form-control">
                                <span class="input-group-btn add-on">
                                    <button class="btn btn-white" type="button">
                                        <i style="background-color: rgb(124, 66, 84);margin-top: 2px;"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>
                </div> <!-- end card-box -->
            </div> <!-- end col -->
        </div>
        <!-- end row -->


        <div class="row">

            <div class="col-lg-6">
                <div class="card-box">
                    <h4 class="header-title m-t-0">默认</h4>
                    <p class="text-muted font-14 m-b-25">
                       用于选择日期范围的JavaScript组件。设计用于Bootstrap CSS框架。
                    </p>

                    <form>
                        <div class="form-group m-b-20">
                            <label有所有选项</label>
                            <input type="text" id="reportrange" class="form-control"/>
                        </div>
                        <div class="form-group m-b-20">
                            <label>Date Range Pick</label>
                            <div>
                                <input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015"/>
                            </div>
                        </div>
                        <div class="form-group m-b-20">
                            <label>日期范围选择</label>
                            <div>
                                <input type="text" class="form-control input-daterange-timepicker" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM"/>
                            </div>
                        </div>
                        <div class="form-group m-b-0">
                            <label>与时间的日期范围</label>
                            <div>
                                <input class="form-control input-limit-datepicker" type="text" name="daterange" value="06/01/2015 - 06/07/2015"/>
                            </div>
                        </div>
                    </form>
                </div> <!-- end card-box -->
            </div>
            <!-- end col -->

            <div class="col-lg-6">

                <div class="card-box">
                    <h4 class="header-title m-t-0">时钟选择器</h4>
                    <p class="text-muted font-14 m-b-25">
                        Bootstrap（或jQuery）的时钟式时间选择器。您的真棒文本在这里。
                    </p>

                    <label>默认时钟选择器</label>
                    <div class="input-group clockpicker m-b-20">
                        <input type="text" class="form-control" value="09:30">
                        <span class="input-group-addon"> <span class="md md-access-time"></span> </span>
                    </div>

                    <label>自动关闭</label>
                    <div class="input-group clockpicker m-b-20" data-placement="top" data-align="top" data-autoclose="true">
                        <input type="text" class="form-control" value="13:14">
                        <span class="input-group-addon"> <span class="md md-access-time"></span> </span>
                    </div>

                    <label>现在是时候了</label>
                    <div class="input-group m-b-20">
                        <input class="form-control" id="single-input" type="text" value="" placeholder="Now">
                        <span class="input-group-btn">
                            <button type="button" id="check-minutes" class="btn waves-effect waves-light btn-primary">Check the minutes</button>
                        </span>
                    </div>

                    <label>放置在左侧，将箭头对齐顶部</label>
                    <div class="input-group clockpicker" data-placement="top" data-align="top">
                        <input type="text" class="form-control" value="13:14">
                        <span class="input-group-addon"> <span class="md md-access-time"></span> </span>
                    </div>
                </div> <!-- card-box -->

            </div> <!-- end col -->

        </div>
        <!-- end row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <h4 class="header-title m-t-0">Date Picker</h4>
                    <p class="text-muted font-14 m-b-25">
                        The datepicker is tied to a standard form input field. Click on the input to open
                        an interactive calendar in a small overlay. Click elsewhere on the page or hit the Esc
                        key to close. If a date is chosen, feedback is shown as the input's value.
                    </p>

                    <div class="row">
                        <div class="col-lg-8">

                            <div class="">
                                <form action="#">
                                    <div class="form-group">
                                        <label>Default Functionality</label>
                                        <div>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker">
                                                <span class="input-group-addon bg-custom b-0"><i class="md md-event-note text-white"></i></span>
                                            </div><!-- input-group -->
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Auto Close</label>
                                        <div>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose">
                                                <span class="input-group-addon bg-custom b-0"><i class="md md-event-note text-white"></i></span>
                                            </div><!-- input-group -->
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Multiple Date</label>
                                        <div>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-multiple-date">
                                                <span class="input-group-addon bg-custom b-0"><i class="md md-event-note text-white"></i></span>
                                            </div><!-- input-group -->
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Date Range</label>
                                        <div>
                                            <div class="input-daterange input-group" id="date-range">
                                                <input type="text" class="form-control" name="start" />
                                                <span class="input-group-addon bg-custom text-white b-0">to</span>
                                                <input type="text" class="form-control" name="end" />
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

                        <div class="col-lg-4">

                            <div class="p-20">

                                <label>Display Inline</label>
                                <div class="center-block" style="margin: 10px auto">
                                    <div id="datepicker-inline" class=""></div>
                                </div><!-- input-group -->
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!-- end row -->

                   
        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="../plugins/moment/moment.js"></script>
        <script src="../plugins/timepicker/bootstrap-timepicker.js"></script>
        <script src="../plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
        <script src="../plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
        <script src="../plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
        <script src="../plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <script src="assets/pages/jquery.form-pickers.init.js"></script>

    </body>
</html>